var i = 0;
var width = 0;
var img_collate = [];
var abs_width = 482;
var width_pic = 0;
var g = 2;
var page = 1;
var g_t = 0;
var g_t_l = 0;
var points_pages = $('.sl_pg');
var points_pages_count = points_pages.length;

var p_img = 0; // Текущая фотка с нуля
var all_photos = 0;
var all_pages = 0; // Всего фоток
var all__pages = 0; //Целых страниц
var all_n_pages = 0; // Количество фоток не помещающаися на странице
var perekl = 0; //После какого эЛемента подсвечивать пункт
var one_or_two = 0;
var del_on = 1;

$(function() {
	all_photos = $('.gallery img').length;
    if (all_photos > 3) {
        one_or_two = 3;
        del_on = 3;
    } else if(all_photos == 2) {
        one_or_two = 1;
        del_on = 3;
        $('#sl_href_l, #sl_href_r, #sl_pgs_c').hide();
    } else if(all_photos == 1) {
        one_or_two = 0;
        del_on = 2.3;
        $('#sl_href_l, #sl_href_r, #sl_pgs_c').hide();
    } else if(all_photos == 3) {
        one_or_two = 2;
        del_on = 6;
    }

    $('.pic_slider').jpreLoader({
        showPercentage: false,
        splashFunction: function() {
            $('.gallery img').hide();
        }
    }, function() {
        $('.gallery img').fadeIn(800);
        $('.gallery img').each(function () {
            // _this = $(this);
            img_collate[i] = $(this).parent()[0];
            if (i === one_or_two) {
                var margin_left = (abs_width - width) / (del_on) + 10;
                $(img_collate[0]).css('margin-left', margin_left);
                $('.sl_pg:first').addClass('hover');
                if (all_photos == 3) {
                    $(img_collate[2]).css('margin-left', margin_left);
                }
                if (all_photos > 3) {
                    $(img_collate[2]).css('margin-left', margin_left);
                    $(this).parent().css('margin-left', '500px');
                }
                if (all_photos > 1) {
                    $(img_collate[1]).css('margin-left', margin_left);
                }
            } else {
                width += $(this)[0].offsetWidth;
            }
            i++;
            if (i === all_photos) {
                all__pages = Math.floor(i / one_or_two);
                all_n_pages = i - one_or_two * all__pages;
                perekl = (one_or_two * all__pages) - 1;
            }
        });
    });
});
// console.log(img_collate);
$('#sl_href_r').click(function() {
	if ((g + 2) > i) return;
	var an = (img_collate[g - 2].offsetWidth);
	$('.pic_slider').animate({"margin-left": "-="+ an +"px"}, 1500);
	$('.sl_img').each(function(k, v) {
		if (k === g) {
			var width_pic = $('.sl_img').parent()[k - 1].offsetWidth;
			var first_pic = width_pic;
			width_pic += $('.sl_img').parent()[k].offsetWidth;
			width_pic += $('.sl_img').parent()[k + 1].offsetWidth;
			var margin_left = (abs_width - width_pic) / 3;

			$($('.sl_img')[k - 2]).parent().animate({"margin-left": '0'}, 800);
			$($('.sl_img')[k - 1]).parent().animate({"margin-left": (margin_left + 35) +"px"}, 1000);
			$($('.sl_img')[k + 1]).parent().animate({'margin-left': margin_left +'px'}, 1500);
			$($('.sl_img')[k]).parent().animate({'margin-left': margin_left +'px'}, 1000);
			$($('.sl_img')[k + 2]).parent().css('margin-left', '280px');
		}
	});
	g++;
	SetPage(g);
});

$('#sl_href_l').click(function() {
	if (g === 2) return;
	var an = (img_collate[g - 2].offsetWidth);
	$('.pic_slider').animate({"margin-left": "+="+ an +"px"}, 1500);
	$('.sl_img').each(function(k, v) {
		if (k === g) {
			var width_pic = $('.sl_img').parent()[k - 3].offsetWidth;
			width_pic += $('.sl_img').parent()[k - 1].offsetWidth;
			width_pic += $('.sl_img').parent()[k - 2].offsetWidth;
			var margin_left = (abs_width - width_pic) / 3;

			$($('.sl_img')[k - 3]).parent().animate({"margin-left": (margin_left + 20) +"px"}, 2000);
			$($('.sl_img')[k - 2]).parent().animate({'margin-left': margin_left +'px'}, 2000);
			$($('.sl_img')[k - 1]).parent().animate({'margin-left': margin_left +'px'}, 2000);
			$($('.sl_img')[k]).parent().animate({'margin-left': '280px'}, 2000);
		}
	});
	g--;
	SetPage(g);
});

$('.sl_pg').click(function () {
	var cur_page = $(this).data('page');
	if (page === cur_page) return false;
	var marg_sl = 0;
	$('.sl_pg').removeClass('hover');
	$(this).addClass('hover');
	var smesenije = (((g - 2) + 3) % 3);
	var prev_page = page;
	if (page > cur_page) {
		// Back slide(if choice before pages)
		// Prev
		var page_s = page - cur_page;
		//Calculate count of iterations
		page = cur_page;
		if (prev_page == points_pages_count) {
			g_t_l = i - (page * 3);
		} else {
			// g_t_l = (page_s * 3) + 1;
			g_t_l = (page_s * 3);
		}
		console.log(g_t_l);
		if (smesenije > 0) {
			g_t_l = g_t_l + (((g - 2) + 3) % 3);
		}
		for (var j = 0; j < g_t_l; j++) {
			if (!img_collate[g - 3]) break;
			marg_sl += (img_collate[g - 2].offsetWidth);
			g--;
		}

		$('.pic_slider').animate({"margin-left": "+="+ marg_sl +"px"}, 1500);
		$('.sl_img').each(function(k, v) {
			if (k === g) {
				var width_pic = $('.sl_img').parent()[k - 1].offsetWidth;
				width_pic += $('.sl_img').parent()[k].offsetWidth;
				width_pic += $('.sl_img').parent()[k - 2].offsetWidth;

				var margin_left = (abs_width - width_pic) / 3;

				$($('.sl_img')[k - 1]).parent().animate({'margin-left': margin_left +'px'}, 1000);
				$($('.sl_img')[k - 2]).parent().animate({'margin-left': margin_left +'px'}, 500);
				$($('.sl_img')[k]).parent().animate({'margin-left': margin_left +'px'}, 1000);
				$($('.sl_img')[k + 1]).parent().animate({'margin-left': '280px'}, 2000);
				return false;
			} else {
				$($('.sl_img')[k]).parent().animate({'margin-left': '0'}, 1000);
			}
		});
	} else {
		//Next
		page = cur_page;
		//Calculate count of iterations
		if (g == 2) {
			g_t = 0;
		}
		if (page * 3 > i && g == 2) {
			g_t = ((page - 1) * 3) - (page * 3 - i);
		} else if (g_t > 0 && page == points_pages_count) {
			var sm = (3 - all_n_pages);
			if (sm > 0 && sm < 3) {
				g_t = (page * 3) - (prev_page * 3) - sm;
			} else {
				g_t = (page * 3) - (prev_page * 3);
			}

		} else if (g_t > 0) {
			g_t = page * 3 - prev_page * 3;
		} else {
			g_t = ((page - 1) * 3);
		}

		if (smesenije > 0) {
			g_t = g_t - (((g - 2) + 3) % 3);
		}
		//
		for (var j = 0; j < g_t; j++) {
			marg_sl += (img_collate[g - 2].offsetWidth);
			g++;
		}

		$('.pic_slider').animate({"margin-left": "-="+ marg_sl +"px"}, 1500);
		$('.sl_img').each(function(k, v) {
			if (k === g) {
				var width_pic = $('.sl_img').parent()[k - 1].offsetWidth;
				width_pic += $('.sl_img').parent()[k].offsetWidth;
				width_pic += $('.sl_img').parent()[k - 2].offsetWidth;

				var margin_left = (abs_width - width_pic) / 3;

				$($('.sl_img')[k - 2]).parent().animate({"margin-left": (margin_left + 35) +"px"}, 1000);
				$($('.sl_img')[k - 1]).parent().animate({'margin-left': margin_left +'px'}, 1000);
				$($('.sl_img')[k]).parent().animate({'margin-left': margin_left +'px'}, 1500);
				$($('.sl_img')[k + 1]).parent().css('margin-left', '280px');
				return false;
			} else {
				$($('.sl_img')[k]).parent().animate({'margin-left': '0'}, 500);
			}
		});
	}
});

function SetPage(img_cur) {
	p_img = Math.round(((img_cur - 3) + 3) / 3);
	if (p_img > page || perekl < img_cur) {
		if (perekl < img_cur) {
			$('.sl_pg').removeClass('hover');
			$(points_pages[p_img]).addClass('hover');
		} else {
			$('.sl_pg').removeClass('hover');
			$(points_pages[p_img - 1]).addClass('hover');
		}
		page++;
	} else if (p_img < page) {
		$('.sl_pg').removeClass('hover');
		$(points_pages[p_img - 1]).addClass('hover');
		page--;
	}
}